<!-- 库存总账 -->
<template>
  <view class="generaLedger">
    <view class="top tc">
      <view class="screen tr f28" @click="showFilters">
        <van-icon name="filter-o" color="#3E3D3D" />筛选
      </view>
      <view class="title fwbold"> 库存总账 </view>
      <view> {{ date_month }} </view>
    </view>
    <!-- 初期余额 -->
    <view class="content mt20">
      <view class="list-box tc mb30">
        <view class="title flexb">
          <view> 初期余额 </view>
          <view> 合计 ：￥{{ begin_balance_money }} </view>
        </view>
        <view :class="toggleClass">
          <view class="row-style disFlex lh40">
            <view class="category"> 品类 </view>
            <view class="name"> 品名 </view>
            <view class="quantity"> 数量 </view>
            <view class="amount"> 金额（元） </view>
          </view>
          <view class="row-style disFlex lh40" v-for="(item, index) in begin_balance" :key="index">
            <view class="category">{{ item.cat_name }}</view>
            <view class="name"> {{ item.goods_name }} </view>
            <view class="quantity"> {{ item.mb_quantity }}</view>
            <view class="amount"> {{ item.mb_amount }} </view>
          </view>
        </view>
        <view class="btn-box" @click="goAll">
          <text>{{ toggle ? "收起" : "查看全部" }}</text>
          <van-icon :name="toggle ? 'arrow-up' : 'arrow-down'" />
        </view>
      </view>
    </view>
    <!-- 本期入库 -->
    <view class="content mt20">
      <view class="list-box tc mb30">
        <view class="title flexb">
          <view> 本期入库 </view>
          <view> 合计 ：￥{{ current_in_money }} </view>
        </view>
        <view :class="toggleClass">
          <view class="row-style disFlex lh40">
            <view class="category"> 品类 </view>
            <view class="name"> 品名 </view>
            <view class="quantity"> 数量 </view>
            <view class="amount"> 金额（元） </view>
          </view>
          <view class="row-style disFlex lh40" v-for="(item, index) in current_in" :key="index">
            <view class="category"> {{ item.cat_name }}</view>
            <view class="name">{{ item.goods_name }} </view>
            <view class="quantity"> {{ item.whg_quantity }} </view>
            <view class="amount"> {{ item.whg_amount }} </view>
          </view>
        </view>
        <view class="btn-box" @click="goAll">
          <text>{{ toggle ? "收起" : "查看全部" }}</text>
          <van-icon :name="toggle ? 'arrow-up' : 'arrow-down'" />
        </view>
      </view>
    </view>
    <!-- 本期出库 -->
    <view class="content mt20">
      <view class="list-box tc mb30">
        <view class="title flexb">
          <view> 本期出库 </view>
          <view> 合计 ：￥{{ current_out_money }} </view>
        </view>
        <view :class="toggleClass">
          <view class="row-style disFlex lh40">
            <view class="category"> 品类 </view>
            <view class="name"> 品名 </view>
            <view class="quantity"> 数量 </view>
            <view class="amount"> 金额（元） </view>
          </view>
          <view class="row-style disFlex lh40" v-for="(item, index) in current_out" :key="index" >
            <view class="category"> {{ item.cat_name }} </view>
            <view class="name"> {{ item.goods_name }} </view>
            <view class="quantity"> {{ item.outbound_quantity }} </view>
            <view class="amount"> {{ item.outbound_amount }} </view>
          </view>
        </view>
        <view class="btn-box" @click="goAll">
          <text>{{ toggle ? "收起" : "查看全部" }}</text>
          <van-icon :name="toggle ? 'arrow-up' : 'arrow-down'" />
        </view>
      </view>
    </view>
    <!-- 期末转出 -->
    <view class="content mt20">
      <view class="list-box tc mb30">
        <view class="title flexb">
          <view> 期末转出 </view>
          <view> 合计 ：￥{{ end_out_money }} </view>
        </view>
        <view :class="toggleClass">
          <view class="row-style disFlex lh40">
            <view class="category"> 品类 </view>
            <view class="name"> 品名 </view>
            <view class="quantity"> 数量 </view>
            <view class="amount"> 金额（元） </view>
          </view>
          <view class="row-style disFlex lh40" v-for="(item, index) in end_out" :key="index">
            <view class="category">{{ item.cat_name }}</view>
            <view class="name"> {{ item.goods_name }}</view>
            <view class="quantity"> {{ item.pdzc_quantity }} </view>
            <view class="amount">{{ item.pdzc_amount }}</view>
          </view>
        </view>
        <view class="btn-box" @click="goAll">
          <text>{{ toggle ? "收起" : "查看全部" }}</text>
          <van-icon :name="toggle ? 'arrow-up' : 'arrow-down'" />
        </view>
      </view>
    </view>
    <!-- 期末余额 -->
    <view class="content mt20">
      <view class="list-box tc mb30">
        <view class="title flexb">
          <view> 期末余额 </view>
          <view> 合计 ：￥{{ end_balance_money }} </view>
        </view>
        <view :class="toggleClass">
          <view class="row-style disFlex lh40">
            <view class="category"> 品类 </view>
            <view class="name"> 品名 </view>
            <view class="quantity"> 数量 </view>
            <view class="amount"> 金额（元） </view>
          </view>
          <view class="row-style disFlex lh40" v-for="(item, index) in end_balance" :key="index">
            <view class="category">{{ item.cat_name }}</view>
            <view class="name">{{ item.goods_name }} </view>
            <view class="quantity"> {{ item.rollout_quantity }} </view>
            <view class="amount"> {{ item.rollout_amount }}</view>
          </view>
        </view>
        <view class="btn-box lh40" @click="goAll">
          <text>{{ toggle ? "收起" : "查看全部" }}</text>
          <van-icon :name="toggle ? 'arrow-up' : 'arrow-down'" />
        </view>
      </view>
    </view>

    <!-- 筛选条件 -->
    <van-popup
      :show="show"
      custom-style="width: 85%"
      @close="onFilterClose"
      position="right"
      root-portal
    >
      <view class="popbox">
        <view class="top flexb f26">
          <view> 筛选条件 </view>
          <van-icon @click="offShow" name="clear" size="50rpx"></van-icon>
        </view>
        <view class="form-box">
          <my-picker
            :form="screenForm"
            name="start_month"
            @click-input="changeMonth"
            :columns="start_month"
            value-key="start_month"
            label="年月"
            placeholder="请选择"
            :norequired="true"
            clearable
          ></my-picker>
          <my-picker
            :form="screenForm"
            name="name"
            @click-input="changeCatarr"
            :columns="catarr"
            value-key="name"
            label="商品类别"
            placeholder="请选择"
            :norequired="true"
          ></my-picker>
          <my-picker
            :form="screenForm"
            name="goods_name"
            @click-input="changeGoodsName"
            :columns="goods_list"
            value-key="goods_name"
            label="商品名"
            placeholder="请选择"
            :norequired="true"
          ></my-picker>
          <my-picker
            :form="screenForm"
            name="stock_name"
            @click-input="changeStock"
            :columns="is_stock"
            value-key="stock_name"
            label="库存"
            placeholder="请选择"
            :norequired="true"
          ></my-picker>
          <my-picker
            :form="screenForm"
            name="nutrition_name"
            @click-input="changeNutrition"
            :columns="is_nutrition"
            value-key="nutrition_name"
            label="营养餐类型"
            placeholder="请选择"
            :norequired="true"
          ></my-picker>
          <my-picker
            :form="screenForm"
            name="show_name"
            @click-input="changeIsshow"
            :columns="isshow"
            value-key="show_name"
            label="是否显示全部为0的商品"
            placeholder="请选择"
            :norequired="true"
          ></my-picker>

        </view>
        <view class="btn-style flexb">
          <van-button color="#999999" type="info" @click="screenReset">重置</van-button>
          <van-button color="#62B158" type="info" @click="screenSubmit">提交</van-button>
        </view>
      </view>
    </van-popup>
  </view>
</template>
  
<script>
export default {
  data() {
    return {
      form: {},
      begin_balance: [], //期初余额
      current_in: [], //本期入库
      current_out: [], //本期出库
      end_out: [], //期末转出
      end_balance: [], //期末余额
      begin_balance_money: "", //期初余额合计
      current_in_money: "", //本期入库合计
      current_out_money: "", //本期出库合计
      end_out_money: "", //期末转出合计
      end_balance_money: "", //期末余额合计
      date_month:"", //日期
      show: false,
      toggle: false,
      screenForm:{},
      start_month:[],//年月
      catarr:[],//分类
      goods_list:[],//商品
      is_stock:[],//库存
      is_nutrition:[],//营养餐
      isshow:[],//是否显示
    };
  },
  computed: {
    toggleClass() {
      return this.toggle ? "heightauto" : "height4";
    },
  },

  /*监听页面加载，该钩子被调用时*/ 
  onLoad() {},

  methods: {
    /*获取条件下拉数据*/
    async getConditions(){
      let res  = await this.$ajax.inConditions();
      if (res.code == 1) {
        this.start_month = res.data.start_month;
        this.catarr = res.data.catarr;
        this.is_stock = res.data.is_stock[0];
        this.is_nutrition = res.data.is_nutrition[0];
        this.isshow = res.data.isshow[0]
      }else{
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    /*页面数据*/
    async getSearch(params) {
      let res = await this.$ajax.inSearch(params);
      if (res.code == 1) {
        this.form = res.data;
        this.begin_balance = res.data.begin_balance;
        this.current_in = res.data.current_in;
        this.current_out = res.data.current_out;
        this.end_balance = res.data.end_balance;
        this.end_out = res.data.end_out;
        this.begin_balance_money = res.data.begin_balance_money;
        this.current_in_money = res.data.current_in_money;
        this.current_out_money = res.data.current_out_money;
        this.end_out_money = res.data.end_out_money;
        this.end_balance_money = res.data.end_balance_money;
        this.date_month = res.data.start_month
        
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    /*查看全部*/ 
    goAll() {
      this.toggle = !this.toggle;
    },
    /*筛选弹出层*/
    showFilters() {
      this.show = true;
    },
    /*关闭*/
    offShow() {
      this.show = false;
    },
    /*年月*/
    changeMonth(key,value){
      this.$set(this.screenForm,'start_month',value['start_month'])
      this.$set(this.screenForm,key,value['start_month'])
    },
    /*商品类别*/
    changeCatarr(key,value){
      this.$set(this.screenForm,'code',value['code'])
      this.$set(this.screenForm,key,value['name'])
      this.getSetgoods(this.screenForm.code)
    },
    /*获取商品*/ 
    async getSetgoods(code){
      let res = await this.$ajax.inSetgoods({
        code :code
      })
      if (res.code == 1) {
        this.goods_list = res.data;
      }else{
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    /*商品名*/ 
    changeGoodsName(key,value){
      this.$set(this.screenForm,'goods_sn',value['goods_sn'])
      this.$set(this.screenForm,key,value['goods_name'])
    },
    /*库存*/
    changeStock(key,value){
      this.$set(this.screenForm,'stock',value['stock'])
      this.$set(this.screenForm,key,value['stock_name'])
    } ,
    /*营养餐类型*/ 
    changeNutrition(key,value){
      this.$set(this.screenForm,'is_nutrition',value['is_nutrition'])
      this.$set(this.screenForm,key,value['nutrition_name'])
    },
    /*是否显示全部为0的商品*/ 
    changeIsshow(key,value){
      this.$set(this.screenForm,'isshow',value['isshow'])
      this.$set(this.screenForm,key,value['show_name'])
    },
      /*筛选提交*/
    async screenSubmit(){
      await this.getSearch({row:this.screenForm})
      this.show = false;
      this.screenForm = {};
    }
  },

  mounted() {   
    this.getSearch();
    this.getConditions();
  },

  /*监听页面显示，页面每次出现在屏幕上都触发*/ 
  onShow() {
    uni.setNavigationBarTitle({
      title: "库存总账",
    });
  },

  /*监听用户下拉动作，一般用于下拉刷新*/ 
  onPullDownRefresh() {},

  /*监听页面初次渲染完成，此时组件已挂载完成*/ 
  onReady() {},
};
</script>
  
<style lang="scss">
.height4 {
  height: 220rpx;
  overflow: hidden;
}
.heightauto {
  height: auto;
}
// 筛选条件
.popbox {
  height: 100vh;
  width: 100%; 
  padding: 4rpx;

  .top {
    padding: 20rpx;
    color: rgba(16, 16, 16, 1);
    font-family: SourceHanSansSC-bold;
  }

  .form-box {
  }

  .btn-style {
    margin-top: 300rpx;
    padding: 20rpx;

    .van-button {
      width: 180rpx;
    }
  }
}
.generaLedger {
  height: 100%;
  min-height: 100vh;
  background: #f4f4f4;
  padding: 20rpx;

  .top {
    line-height: 50rpx;
    color: #101010;
    font-family: SourceHanSansSC-bold;

    .screen {
      width: 100%;
      color: rgba(16, 16, 16, 1);
    }

    .title {
    }
  }

  .content {

    .list-box {
      line-height: 40rpx;
      border-radius: 16rpx;
      background-color: rgba(255, 255, 255, 1);

      .title {
        height: 80rpx;
        line-height: 80rpx;
        border-top-left-radius: 16rpx;
        border-top-right-radius: 16rpx;
        background-color: rgba(98, 177, 88, 1);
        color: white;
        padding: 0rpx 20rpx;
      }

      .content {
        height: 400rpx;
        overflow: hidden;
      }
      .row-style {
        width: 100%;

        .category {
          width: 15%;
        }
        .name {
          width: 50%;
        }
        .quantity {
          width: 15%;
        }
        .amount {
          width: 20%;
        }
      }
      .btn-box {
        color: rgba(46, 136, 238, 1);
      }
    }
  }
}
</style>